<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>xiaoxi-18001010319-方弘轩</title>
    <link rel="stylesheet" href="./comment/iconfont.css">
    <link rel="stylesheet" href="./myicon/iconfont.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <link rel="stylesheet" href="./color-icon.css">
    <style>
        body {
            padding: 0;
            margin: 0;
            min-width: 320px;
        }
        ul,li,p,a,div,span{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        #foot {
            display: flex;
            align-content: center;
            height: 50px;
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: #fff;
        }
        #foot li{
            width: 23%;
            text-align: center;
            align-content: center;
            margin-top: 3px;
        }
        #foot li span{
            font-size: 25px;
            color: rgb(75, 75, 75);
        }
        #foot li span p{
            font-size: 13px;
        }
        #top{    
            position: relative;
        }
        .null{
            height: 50px;
        }
        .title{
            width: 100%;
            height: 50px;
            background-color: #fff;
            position: fixed;
            top: 0;
            display: flex;
            align-content: center;
            box-shadow:0px 3px 5px rgb(184, 183, 183);
        }
        .title span:first-child{
            font-size: 25px;
            line-height: 50px;
            flex-grow: 5;
            margin-left: 10px;
            color: rgb(87, 87, 87);
        }
        .title span:nth-child(2){
            font-size: 15px;
            text-align: center;
            flex-grow: 1;
            color: rgb(143, 142, 142);
        }
        .title span:nth-child(3){
            font-size: 15px;
            text-align: center;
            flex-grow: 1;
            color: rgb(143, 142, 142);
        }
        .title span:nth-child(4){
            font-size: 25px;
            text-align: right;
            flex-grow: 5;
            line-height: 50px;
            margin-right: 10px;
            color: rgb(87, 87, 87);
        }
        .dt{
             display: inline-block;
             height: 49px;
        }
        .first{
            border-bottom: 2px solid black;
            color: rgb(87, 87, 87);
        }
        .tc{
            background-color: rgb(233, 231, 231);
            width: 100%;
            height: 80vw;
        }
        .tnav {
            display: flex;
            align-content: center;
            height: 60px;
            width: 100%;
            background-color: #fff;
        }
        .tnav li{
            width: 30%;
            text-align: center;
            align-content: center;
            margin-top: 8px;
        }
        .tnav li span{
            font-size: 30px;
            color: rgb(75, 75, 75);
        }
        .tnav li span p{
            font-size: 12px;
        }
        .icon-yaoqinghuida1:before{
            color: yellowgreen;
        }
        .icon-xihuan:before{
            color: red;
        }
        .icon-guanzhu:before{
            color:blueviolet
        }
        .icon-xiaoxi_pinglunyuzhuanfa:before{
            color: cadetblue;
        }
        .main li{
            width: 100%;
            height: 60px;
            line-height: 60px;
            margin: 0px;
            display: flex;
            background-color: #fff;
            
            border-top: 1px solid #ccc;
        }
        .main li span{
            font-size: 35px;
            flex-wrap: 1;
            margin-right: 10px;
            margin-left: 5px;
        }
        .main li div p{
            font-size: 14px;
            width: 100%;
            margin: 0;
            padding: 0;
            height: 30px;
            line-height: 30px;   
            color: rgb(126, 125, 125);      
        } 
        .main li div p span {
            margin: 0;
            font-size: 15px;
            color: black;
            font-weight: bold;
            display: inline-block;
        }
        .main li div p span:last-child{
            color: cadetblue;
            margin-left: 50px;
        }
        .icon-zhihu1:before{
            color: cornflowerblue;
        }
        .icon-xitongxiaoxi:before {
            color: rgb(90, 90, 90);
        }
        .icon-zhihu:before{
            color: darkmagenta;
        }
        .last{
            margin-top: 20px;
            text-align: center;
            color: cadetblue;
            font-size: 14px;
        }
        .tc {
            height: 600px;
            display: none;
        }
        .show {
            display: block;
        }
        .lot{
            margin-top: 20px;
            width: 100%;
            height: 1100px;
            background-color: #fff;
        }
        .lot li {
            height: 160px;
            border-bottom: 1px solid #ccc;
        }
        .lot li div:nth-child(1){
            display: flex;
            margin-top: 15px;
        }
        .lot li div img {
            width: 35px;
            margin: 10px;
            flex-wrap: 1;
        }
        .user p:nth-child(1){
            height: 28px;
            font-size: 15px;
            line-height: 28px;
        }
        .user p:nth-child(2){
            font-size: 13px;
            color: cadetblue;
        }
        .box{
            height: 80px;
            width: 95%;
            justify-content: space-around ;
            background-color: rgb(224, 222, 222);
            border-radius: 10px;
            margin: 10px;
        }
        .box p:nth-child(1){
            height: 60px;
            margin-left: 10px;
            font-size: 15px;
            font-weight: bold;
            line-height: 30px;
        }
        .box p:nth-child(2){
            margin-left: 10px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: cadetblue;
        }
        .box img{
            width: 50px;
            padding: 0;
            margin: 0;
            border: none;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="title">
            <span class="iconfont icon-tixing"></span>
            <span><span class="dt" style="font-size: 18px; margin: 0;">动态</span></span>
            <span><span class="dt first" style="font-size: 18px; margin: 0;">消息</span></span>
            <span class="iconfont icon-xiaoxi3"></span>
        </div>
        <div class="null"></div>
        <div class="tc show">
            <ul class="tnav">
                <li><span class="iconfont icon-yaoqinghuida1"><p>邀请回答 </p></span></li>
                <li><span class="iconfont icon-xihuan"><p>赞同与喜欢 </p></span></li>
                <li><span class="iconfont icon-guanzhu"><p>关注 </p></span></li>
                <li><span class="iconfont icon-xiaoxi_pinglunyuzhuanfa"><p>评论与转发 </p></span></li>
            </ul>
            <ul class="main">
                <li>
                    <span class="iconfont icon-zhihu1"></span>
                    <div>
                        <p><span>官方账号消息</span><span>12-06</span></p>
                        <p>亲爱的 一个有品位的人你好：...</p>
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-xitongxiaoxi"></span>
                    <div>
                        <p><span>系统消息</span><span>10-26</span></p>
                        <p>徽章小助手恭喜你...</p>
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-zhihu"></span>
                    <div>
                        <p><span>知乎活动助手</span><span>08-06</span></p>
                        <p>同学，你的大学拍了拍你</p>
                    </div>
                </li>
                <p class="last">没有更多内容</p>
            </ul>
        </div>
        <div class="tc">
            <ul class="lot">
                <li>
                    <div>
                        <img src="images/tx6.jpg">
                        <div class="user">
                            <p>官方账号消息</p>
                            <p>参与了严选专栏&nbsp; · &nbsp;12-04</p>
                        </div>
                    </div>
                    <div class="box">
                        <p>为什么P社游戏会有大量尴尬梗小鬼出现？</p>
                        <p>146 回答 · 258关注</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="images/tx4.jpg">
                        <div class="user">
                            <p>官方账号消息</p>
                            <p>参与了严选专栏&nbsp; · &nbsp;12-04</p>
                        </div>
                    </div>
                    <div class="box">
                        <p>为什么P社游戏会有大量尴尬梗小鬼出现？</p>
                        <p>146 回答 · 258关注</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="images/tx1.jpg">
                        <div class="user">
                            <p>官方账号消息</p>
                            <p>参与了严选专栏&nbsp; · &nbsp;12-04</p>
                            
                        </div>
                    </div>
                    <div class="box">
                        <p>有哪些让你用一次后感觉「以前的力气都白费了」的家居好物？</p>
                        <p>156 回答 · 564关注</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="images/tx1.jpg">
                        <div class="user">
                            <p>官方账号消息</p>
                            <p>参与了严选专栏&nbsp; · &nbsp;12-04</p>
                            
                        </div>
                    </div>
                    <div class="box">
                        <p>有哪些让你用一次后感觉「以前的力气都白费了」的家居好物？</p>
                        <p>156 回答 · 564关注</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="images/tx1.jpg">
                        <div class="user">
                            <p>官方账号消息</p>
                            <p>参与了严选专栏&nbsp; · &nbsp;12-04</p>
                            
                        </div>
                    </div>
                    <div class="box">
                        <p>有哪些让你用一次后感觉「以前的力气都白费了」的家居好物？</p>
                        <p>156 回答 · 564关注</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="images/tx1.jpg">
                        <div class="user">
                            <p>官方账号消息</p>
                            <p>参与了严选专栏&nbsp; · &nbsp;12-04</p>
                            
                        </div>
                    </div>
                    <div class="box">
                        <p>有哪些让你用一次后感觉「以前的力气都白费了」的家居好物？</p>
                        <p>156 回答 · 564关注</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    

    <ul id="foot">
        <li><span class="iconfont icon-jishiben"><p>首页</p> </span></li>
        <li><span class="iconfont icon-huiyuan1"><p>会员</p> </span></li>
        <li><span class="iconfont icon-faxian2"><p>发现</p> </span></li>
        <li><span class="iconfont icon-xiaoxi-xuanzhong"><p>消息</p> </span></li>
        <li><span class="iconfont icon-wode2"><p>我的</p> </span></li>
    </ul>

    <script>
        var tab = document.getElementById("top");
        tabs(tab);
        function tabs(tab){ 
            var title=tab.querySelector("title");
            var span=document.querySelectorAll(".dt");
            var tc = tab.querySelectorAll(".tc");
            console.log(tab,title,span,tc);

            for(var i=0; i<span.length; i++){
                span[i].onclick=function(){
                    for(var j=0; j<span.length; j++){
                        span[j].className="";
                        span[j].index=j;
                        tc[j].style.display="block";
                    }
                    this.className="first";
                    tc[this.index].style.display="none";
                }
            }
        }
    </script>
</body>
</html>